<template>
  <div class="user-list-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-button type="primary" @click="handleAdd">新增商户</el-button>
        </div>
      </template>
      
      <!-- 搜索区域 -->
      <div class="search-container">
        <el-form :model="searchForm" inline>
          <el-form-item label="商户名称">
            <el-input
              v-model="searchForm.Name"
              placeholder="请输入名称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="searchForm.Email"
              placeholder="请输入邮箱"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="商户状态">
            <el-select
              v-model="searchForm.Status"
              placeholder="请选择商户状态"
              clearable
              style="width: 200px"
            >
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 商户表格 -->
      <el-table 
        :data="userList" 
        v-loading="loading"
        style="width: 100%"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        empty-text="暂无数据"
      >
        <el-table-column prop="Id" label="id" width="80" />
        <el-table-column prop="AccountId" label="商户账户id" width="200">
          <template #default="scope">
            <div class="copy-cell">
              <el-tooltip :content="scope.row.AccountId" placement="top">
                <span class="text-ellipsis">{{ scope.row.AccountId }}</span>
              </el-tooltip>
              <el-button 
                type="text" 
                size="small" 
                @click="handleCopy(scope.row.AccountId, 'AccountId')"
                class="copy-btn"
                v-if="scope.row.AccountId"
              >
                <el-icon><DocumentCopy /></el-icon>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="商户名称" />
        <el-table-column prop="Email" label="商户邮箱" show-overflow-tooltip />
        <el-table-column prop="ClientId" label="client_id" width="220">
          <template #default="scope">
            <div class="copy-cell">
              <el-tooltip :content="scope.row.ClientId" placement="top">
                <span class="text-ellipsis">{{ scope.row.ClientId }}</span>
              </el-tooltip>
              <el-button 
                type="text" 
                size="small" 
                @click="handleCopy(scope.row.ClientId, 'ClientId')"
                class="copy-btn"
                v-if="scope.row.ClientId"
              >
                <el-icon><DocumentCopy /></el-icon>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ApiKey" label="api密钥" width="220">
          <template #default="scope">
            <div class="copy-cell">
              <el-tooltip :content="scope.row.ApiKey" placement="top">
                <span class="text-ellipsis">{{ scope.row.ApiKey }}</span>
              </el-tooltip>
              <el-button 
                type="text" 
                size="small" 
                @click="handleCopy(scope.row.ApiKey, 'ApiKey')"
                class="copy-btn"
                v-if="scope.row.ApiKey"
              >
                <el-icon><DocumentCopy /></el-icon>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="StatusString" label="状态" width="70">
          <template #default="scope">
            <el-tag 
              :type="scope.row.Status === 1 ? 'success' : 'danger'"
            >
              {{ scope.row.StatusString ? scope.row.StatusString : (scope.row.Status === 1 ? '启用' : '禁用') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button type="text" size="small" @click="handleEdit(scope.row)">更新</el-button>
              <el-button type="text" size="small" @click="refreshApiKey(scope.row)">刷新apiKey</el-button>          
              <el-button type="text" size="small" @click="uqBankToBank(scope.row)">uq_banking账户互转</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="getIssuingAccountBillList(scope.row)">issuing账户账单列表</el-button>
              <el-button type="text" size="small" @click="getIssuingAccountInfo(scope.row)">issuing账户信息</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/更新商户对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userRules"
        label-width="80px"
      >
        <el-form-item label="商户名称" prop="Name">
          <el-input v-model="userForm.Name" placeholder="请输入商户名称" />
        </el-form-item>
        <el-form-item label="邮箱" prop="Email">
          <el-input v-model="userForm.Email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item v-if="dialogType === 'edit'" label="商户状态" prop="Status">
          <el-radio-group v-model="userForm.Status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 银行账户互转对话框 -->
    <el-dialog
      title="uq_banking账户互转"
      v-model="transferDialogVisible"
      width="500px"
      :before-close="() => transferDialogVisible = false"
    >
      <el-form
        ref="transferFormRef"
        :model="transferForm"
        :rules="transferRules"
        label-width="120px"
      >
        <el-form-item label="转入代理商" prop="ToMerchantId">
          <el-select
            v-model="transferForm.ToMerchantId"
            placeholder="请选择转入代理商"
            clearable
            style="width: 100%"
          >
            <template v-for="item in merchantIdOptions" :key="item.Id">
              <el-option
                v-if="item.Id !== transferForm.FromMerchantId"
                :label="item.Name"
                :value="item.Id">
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="转账金额" prop="Amount">
          <el-input-number
            v-model="transferForm.Amount"
            placeholder="请输入转账金额"
            :min="0"
            :precision="2"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="transferDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleTransferSubmit" v-loading="transferLoading">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- issuing账户账单列表弹框 -->
    <el-dialog
      title="issuing账户账单列表"
      v-model="billDialogVisible"
      width="80%"
      :before-close="() => billDialogVisible = false"
      class="bill-dialog"
    >
      <div class="bill-search-container">
        <el-form :model="billSearchForm" inline>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="billDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledBillDate"
              @change="handleBillDateChange"
              style="width: 320px"
            />
            <span class="date-tip">（最多选择90天）</span>
          </el-form-item>
        </el-form>
      </div>
      
      <el-table 
        :data="billList" 
        v-loading="billLoading"
        style="width: 100%"
        empty-text="暂无数据"
        class="bill-table"
      >
        <el-table-column 
          prop="transaction_id"
          label="交易id"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="transaction_type"
          label="交易类型"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="currency"
          label="交易币种"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="amount"
          label="交易金额"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="transaction_status"
          label="交易状态"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="description"
          label="描述"
          show-overflow-tooltip
        />
        <el-table-column 
          prop="complete_time"
          label="完成时间"
          show-overflow-tooltip
        />
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container" style="margin-top: 20px">
        <el-pagination
          v-model:current-page="billCurrentPage"
          v-model:page-size="billPageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="billTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleBillSizeChange"
          @current-change="handleBillCurrentChange"
        />
      </div>
    </el-dialog>

    <!-- issuing账户信息弹框 -->
    <el-dialog
      title="issuing账户信息"
      v-model="infoDialogVisible"
      width="500px"
      :before-close="() => infoDialogVisible = false"
      class="info-dialog"
    >
      <div v-loading="infoLoading" class="info-content">
        <template v-if="infoData">
          <div class="info-item">
            <span class="info-label">可用余额：</span>
            <span class="info-value">{{ infoData.AvailableBalance }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">余额状态：</span>
            <span class="info-value">{{ infoData.BalanceStatus }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">币种：</span>
            <span class="info-value">{{ infoData.Currency }}</span>
          </div>
        </template>
        <div v-else-if="!infoLoading" class="no-data">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'
import { merchantList, addMerchant, updateMerchant, updateApiKey, upBankToBank, deleteMerchant, issuingBillList, issuingInfoList } from '@/api/merchant'
import { merchantList as merchantSelectList } from '@/api/selectList'

// 响应式数据
const loading = ref(false)
const userList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const dialogType = ref('add') // 'add' or 'edit'
const userFormRef = ref()
const transferDialogVisible = ref(false)
const transferFormRef = ref()
const merchantIdOptions = ref([])
const transferLoading = ref(false)
const billDialogVisible = ref(false)
const infoDialogVisible = ref(false)
const billList = ref([])
const infoData = ref(null)
const billLoading = ref(false)
const infoLoading = ref(false)
const billCurrentPage = ref(1)
const billPageSize = ref(10)
const billTotal = ref(0)
const currentMerchantId = ref(null)
const billDateRange = ref([])

// 搜索表单
const searchForm = reactive({
  Name: '',
  Email: '',
  Status: null
})

// 商户表单
const userForm = reactive({
  Id: '',
  Name: '',
  Email: '',
  Status: 1
})

// 转账表单
const transferForm = reactive({
  Amount: null,
  FromMerchantId: null,
  ToMerchantId: null
})

// 账单筛选表单 - 添加这个定义
const billSearchForm = reactive({
  StartTime: '',
  EndTime: ''
})

// 表单验证规则
const userRules = {
  Name: [
    { required: true, message: '请输商户名', trigger: 'blur' },
  ],
  Email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
}

// 转账表单验证规则
const transferRules = {
  Amount: [
    { required: true, message: '请输入转账金额', trigger: 'blur' },
    { type: 'number', message: '请输入有效数字', trigger: 'blur' }
  ],
  FromMerchantId: [
    { required: true, message: '请选择转出代理商', trigger: 'change' }
  ],
  ToMerchantId: [
    { required: true, message: '请选择转入代理商', trigger: 'change' }
  ]
}

// 计算属性
const dialogTitle = computed(() => {
  return dialogType.value === 'add' ? '新增商户' : '编辑商户'
})

// 获取商户列表
const getUserList = async () => {
  loading.value = true
  try {
    const res = await merchantList({
      Page: currentPage.value,
      PageSize: pageSize.value,
      Name: searchForm.Name,
      Status: searchForm.Status,
      Email: searchForm.Email,
    })
    if (res.code === 200) {
      userList.value = res.data?.List || []
      total.value = res.data?.Total
    } else {
      ElMessage.error('获取商户列表失败')
    }
  } catch (error) {
    ElMessage.error('获取商户列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getUserList()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    Name: '',
    Email: '',
    Status: null
  })
  currentPage.value = 1
  getUserList()
}

// 分页大小改变
const handleSizeChange = (size) => {
  pageSize.value = size
  getUserList()
}

// 当前页改变
const handleCurrentChange = (page) => {
  currentPage.value = page
  getUserList()
}

// 新增商户
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  resetForm()
}

// 编辑商户
const handleEdit = (row) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  // 深拷贝数据，避免直接修改
  Object.assign(userForm, JSON.parse(JSON.stringify(row)))
}

// 删除商户
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定删除该商户吗？删除后相关数据将无法恢复！',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const res = await deleteMerchant({ Id: row.Id })
      if (res.code === 200) {
        ElMessage.success('删除成功')
        getUserList()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

// 刷新商户apiKey
const refreshApiKey = async (row) => {
  ElMessageBox.confirm('确定要刷新该商户的ApiKey?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await updateApiKey({
        Id: row.Id
      })
      if(res.code === 200) {        
        ElMessage.success('刷新成功')
        getUserList()
      }
    } catch (error) {      
      if(res.code === 200) {        
        ElMessage.error('刷新失败')
        getUserList()
      }
    }
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消'
    });          
  });
  
}

// 打开转账对话框
const uqBankToBank = async (row) => {
  transferDialogVisible.value = true
  resetTransferForm()
  transferForm.FromMerchantId = row.Id
}

// 重置转账表单
const resetTransferForm = () => {
  if (transferFormRef.value) {
    transferFormRef.value.resetFields()
  }
  Object.assign(transferForm, {
    Amount: null,
    FromMerchantId: null,
    ToMerchantId: null
  })
}

// 提交转账表单
const handleTransferSubmit = async () => {
  if (!transferFormRef.value) return
  transferLoading.value = true
  try {
    await transferFormRef.value.validate()
    
    // 验证转出和转入代理商不能相同
    if (transferForm.FromMerchantId === transferForm.ToMerchantId) {
      ElMessage.error('转出代理商和转入代理商不能相同')
      return
    }
    
    const res = await upBankToBank({
      Amount: transferForm.Amount,
      FromMerchantId: transferForm.FromMerchantId,
      ToMerchantId: transferForm.ToMerchantId
    })
    
    if (res.code === 200) {
      ElMessage.success('账户互转成功')
      transferDialogVisible.value = false
      getUserList()
    } else {
      ElMessage.error(res.message || '账户互转失败')
    }
  } catch (error) {
    console.error(error)
  } finally {
    transferLoading.value = false
  }
}

// 获取商户选择列表
const getMerchantIdOptions = async () => {
  try {
    const res = await merchantSelectList()
    if (res.code === 200) {
      merchantIdOptions.value = res.data || []
    }
  } catch (error) {
    console.error(error)
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!userFormRef.value) return
  
  try {
    await userFormRef.value.validate()
    if (dialogType.value === 'add') {
      // 新增商户
      const newUser = {
        Name: userForm.Name,
        Email: userForm.Email,
      }
      const res = await addMerchant(newUser)
      if (res.code === 200) {
        ElMessage.success('新增商户成功')
      } else {
        ElMessage.error(res.message)
      }
    } else {
      // 编辑商户
      const newUser = {
        Name: userForm.Name,
        Email: userForm.Email,
        Id: userForm.Id,
        Status: userForm.Status
      }
      const res = await updateMerchant(newUser)
      if (res.code === 200) {
        ElMessage.success('更新商户成功')
      } else {
        ElMessage.error(res.message)
      }
    }    
    dialogVisible.value = false
    getUserList()
  } catch (error) {
    console.error(error)
  }
}

// 重置表单
const resetForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields()
  }
  Object.assign(userForm, {
    Name: '',
    Email: '',
    Status: null
  })
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 获取issuing账户账单列表
const getIssuingAccountBillList = async (row) => {
  currentMerchantId.value = row.Id
  billDialogVisible.value = true
  // 重置表单和分页
  billCurrentPage.value = 1
  billSearchForm.StartTime = ''
  billSearchForm.EndTime = ''
  billDateRange.value = []
  billList.value = []
  billTotal.value = 0
  await fetchBillList()
}

// 获取账单列表数据
const fetchBillList = async () => {
  if (!currentMerchantId.value) return
  billLoading.value = true
  try {
    const res = await issuingBillList({
      MerchantId: currentMerchantId.value,
      StartTime: billSearchForm.StartTime || undefined,
      EndTime: billSearchForm.EndTime || undefined,
      Page: billCurrentPage.value,
      PageSize: billPageSize.value,
    })
    if (res.code === 200) {
      billList.value = res.data?.list || []
      billTotal.value = res.data?.Total || 0
    } else {
      ElMessage.error(res.message || '获取账单列表失败')
    }
  } catch (error) {
    ElMessage.error('获取账单列表失败')
  } finally {
    billLoading.value = false
  }
}

// 账单时间范围改变处理
const handleBillDateChange = (dates) => {
  if (!dates || dates.length !== 2) {
    billSearchForm.StartTime = ''
    billSearchForm.EndTime = ''
    billDateRange.value = []
    return
  }
  
  const startTime = new Date(dates[0])
  const endTime = new Date(dates[1])
  const diffDays = Math.ceil((endTime - startTime) / (1000 * 60 * 60 * 24))
  
  if (diffDays > 90) {
    ElMessage.warning('时间范围不能超过90天')
    billSearchForm.StartTime = ''
    billSearchForm.EndTime = ''
    billDateRange.value = []
    return
  }
  
  billSearchForm.StartTime = dates[0]
  billSearchForm.EndTime = dates[1]
  billCurrentPage.value = 1
  fetchBillList()
}

// 禁用超过90天的日期
const disabledBillDate = (time) => {
  if (!billDateRange.value || billDateRange.value.length === 0) {
    return false
  }
  const startTime = new Date(billDateRange.value[0])
  const selectedTime = new Date(time)
  const diffDays = Math.ceil((selectedTime - startTime) / (1000 * 60 * 60 * 24))
  return diffDays > 90 || diffDays < 0
}

// 获取issuing账户信息
const getIssuingAccountInfo = async (row) => {
  currentMerchantId.value = row.Id
  infoDialogVisible.value = true
  await fetchInfoList()
}

// 获取账户信息数据
const fetchInfoList = async () => {
  if (!currentMerchantId.value) return
  infoLoading.value = true
  try {
    const res = await issuingInfoList({
      MerchantId: currentMerchantId.value
    })
    if (res.code === 200) {
      infoData.value = res.data || null
    } else {
      ElMessage.error(res.message || '获取账户信息失败')
      infoData.value = null
    }
  } catch (error) {
    ElMessage.error('获取账户信息失败')
    infoData.value = null
  } finally {
    infoLoading.value = false
  }
}

// 账单列表分页处理
const handleBillSizeChange = (size) => {
  billPageSize.value = size
  billCurrentPage.value = 1
  fetchBillList()
}

const handleBillCurrentChange = (page) => {
  billCurrentPage.value = page
  fetchBillList()
}

// 生命周期
onMounted(() => {
  getUserList()
  getMerchantIdOptions()
})

// 复制功能
const handleCopy = async (text, fieldName) => {
  try {
    if (!text) {
      ElMessage.warning('复制内容为空')
      return
    }
    
    // 使用现代浏览器的 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text)
      ElMessage.success(`${fieldName}复制成功`)
    } else {
      // 降级方案：使用传统的 document.execCommand
      const textArea = document.createElement('textarea')
      textArea.value = text
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      
      try {
        const successful = document.execCommand('copy')
        if (successful) {
          ElMessage.success(`${fieldName}复制成功`)
        } else {
          ElMessage.error('复制失败')
        }
      } catch (err) {
        ElMessage.error('复制失败')
      }
      
      document.body.removeChild(textArea)
    }
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败')
  }
}
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.search-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-table .cell) {
  white-space: nowrap;
}

:deep(.el-table__header-wrapper .cell) {
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 20px;
  margin-bottom: 10px;
}

/* 复制按钮样式 */
.copy-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-ellipsis {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.copy-btn {
  flex-shrink: 0;
  padding: 4px;
  margin: 0;
}

.copy-btn:hover {
  color: var(--el-color-primary);
}

::v-deep(.el-table__body-wrapper .el-scrollbar__bar) {
  display: block!important;
}
:deep(.el-scrollbar__thumb) {
  background-color: #909399;
  opacity: 1;
}

/* 账单和账户信息弹框字体样式 */
.bill-dialog :deep(.el-dialog__body),
.info-dialog :deep(.el-dialog__body) {
  font-size: 11px;
}

.bill-table :deep(.el-table),
.info-table :deep(.el-table) {
  font-size: 11px;
}

.bill-table :deep(.el-table th),
.bill-table :deep(.el-table td),
.info-table :deep(.el-table th),
.info-table :deep(.el-table td) {
  font-size: 11px;
  padding: 8px 0;
}

.bill-search-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 11px;
}

.date-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 11px;
}

/* 日期选择器禁用样式 */
.bill-dialog :deep(.el-picker-panel__content) {
  font-size: 11px;
}

/* 账单弹框标题和表单字体 */
.bill-dialog :deep(.el-dialog__title),
.bill-dialog :deep(.el-form-item__label),
.bill-dialog :deep(.el-input__inner),
.bill-dialog :deep(.el-pagination) {
  font-size: 11px;
}

.bill-dialog :deep(.el-button) {
  font-size: 11px;
}

/* 操作按钮样式 - 添加这个 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px;
}

.action-buttons .el-button + .el-button {
  margin-left: 0;
}

.info-content {
  padding: 20px;
  min-height: 120px;
}

.info-item {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.info-label {
  display: inline-block;
  width: 100px;
  font-weight: 500;
  color: #606266;
}

.info-value {
  color: #303133;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}
</style>